<!DOCTYPE html>
<html lang="zh-Hans-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <link rel="shortcut icon" th:href="@{/image/favicon.ico}" type="image/x-icon"/>
    <title>博客首页</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/index_style.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/animate.min.css}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu" class="hover_animation menu_open" data-mark="false">
    <span></span>
    <span></span>
    <span></span>
</div>
<div id="navgation" class="navgation navgation_close">
    <ul class="point">
        <li><a th:href="@{/article}">博客</a></li>
        <li><a th:href="@{/message}">留言</a></li>
        <li><a th:href="@{/diary}">日记</a></li>
        <li><a th:href="@{/link}">友链</a></li>
    </ul>
    <div class="logo"><a>Mr.wu</a></div>
</div>
<div class="section" id="section1">
    <div class="fp-tablecell">
        <div class="page1">
            <div class="nav wow zoomIn" data-wow-duration="2s">
                <h1>吸猫的牧师</h1>
                <p>如果你因错过太阳而流泪，那么你也将错过群星。</p>
                <a class="layui-btn layui-btn-normal" style="margin-top: 20px" th:href="@{/article}">Enter Blog</a>
            </div>
            <a class="next wow fadeInUp" data-wow-duration="2s" id="next"></a>
        </div>
    </div>
</div>
<div class="section" id="section2">
    <div class="fp-tablecell">
        <div class="page2">
            <div class="warp-box">
                <div class="new-article">
                    <div class="inner wow fadeInDown" data-wow-delay=".2s">
                        <h1>热门文章</h1>
                        <p>
                            让我们每天带着希望出门，如果事与愿违
                            <br>就再把希望带回来，休息休息，明天继续带出门
                        </p>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm4 layui-col-md4  wow fadeInUp"
                         th:attr="data-wow-delay = '.'+(${t.count}-1)*2+'s'" style="padding: 0 10px"
                         th:each="article,t: ${session.mostPopularArticles}">
                        <div class="single-news" th:if="${article}!=null">
                            <div class="news-head">
                                <img th:src="@{/image/articleImages/c7044c1e-61f4-4662-b735-858644c25d20.jpg}">
                                <!-- 获取当前用户id ，跳转到文章详情页 -->
                                <a th:href="@{/read/{articleId}/{articleType}(articleId=${article.id},articleType=${article.articleType})}"
                                   class="link"><i class="fa fa-link"></i></a>
                            </div>
                            <div class="news-content">
                                <h4>
                                    <a>
                                        [[${article.title}]]
                                    </a>
                                </h4>
                                <div class="date">
                                    [[${#dates.year(article.createDate)} + '年' + ${#dates.month(article.createDate)} +
                                    '月' + ${#dates.day(article.createDate)} + '日']]
                                </div>
                                <p>
                                    [[${article.summary}]]
                                </p>
                                <!-- 获取当前用户id ，跳转到文章详情页 -->
                                <a th:href="@{/read/{articleId}/{articleType}(articleId=${article.id},articleType=${article.articleType})}"
                                   class="btn">
                                    阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section" id="section3">
    <div class="fp-tablecell">
        <div class="page3">
            <div class="warp-box">
                <div class="warp">
                    <div class="inner">
                        <div class="links">
                            <ul>
                                <li class="wow fadeInLeft"><a th:href="@{/toMe}">关于</a></li>
                                <li class="wow fadeInRight"><a th:href="@{/link}">+友情链接</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section" id="section4">
    <div class="fp-tablecell">
        <div class="page4">
            <div class="warp-box">
                <div class="about">
                    <div class="inner">
                        <h1 class="wow fadeInLeft">吸猫的牧师</h1>
                        <p class="wow fadeInRight">
                            这家伙很懒，除了帅气和智慧什么都没留下
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="footer wow fadeInUp" id="contact">
    <div class="footer-top">
        <div class="container">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
                    <div class="single-widget about">
                        <div class="footer-logo">
                            <h2>吸猫的牧师</h2>
                        </div>
                        <p>都是风景,幸会</p>
                        <div class="button">
                            <!-- 做一个自我介绍的页面-->
                            <a th:href="@{/toMe}" class="btn layui-btn layui-btn-normal">About Me</a>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
                    <div class="single-widget">
                        <h2>相关链接</h2>
                        <ul class="social-icon">
                            <li class="active"><a th:href="@{/article}"><i class="fa fa-book"></i>博文</a></li>
                            <li class="active"><a th:href="@{/message}"><i class="fa fa-comments"></i>留言</a></li>
                            <li class="active"><a th:href="@{/link}"><i class="fa fa-share"></i>友链</a></li>
                            <li class="active"><a th:href="@{/diary}"><i class="fa fa-snowflake-o"></i>日记</a></li>
                        </ul>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                    <div class="single-widget contact">
                        <h2>联系我</h2>
                        <ul class="list">
                            <li><i class="fa fa-wechat"></i>微信: 13184666356</li>
                            <li><i class="fa fa-qq"></i>QQ: 2038195485</li>
                            <li><i class="fa fa-envelope"></i>邮箱: 2038195485@qq.com</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="copyright">
        <div class="container">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 text-center">
                    <p>Copyright © 2023-2023 吸猫的纯种牧师 All Rights Reserved V.1.0.0 备案号:<a style="color:white" href="https://beian.miit.gov.cn//" target="_blank">赣ICP备2023000200号</a></p>
                </div>
            </div>
        </div>
    </div>
</footer>

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/wow.min.js}"></script>
<script th:src="@{/js/index.js}"></script>
<script>
    // 热门文章,选取浏览量最多的三篇文章,存入一个集合中,循环遍历
    //                     <div class="layui-col-xs12 layui-col-sm4 layui-col-md4  wow fadeInUp"
    //                          th:attr="data-wow-delay = '.'+(${t.count}-1)*2+'s'" style="padding: 0 10px"
    //                          th:each="article,t: ${session.mostPopularArticles}">
    //                             <div class="single-news" th:if="${article}!=null">
    //                                         <div class="news-head">
    //                                                 <img th:src="@{/image/articleImages/{imageName}(imageName=${article.image})}">
    //                     <!--                                <img th:src="https://gitee.com/wlvip/images/commit/1c1c599da5a1b66ba0e26e4401342cc0083d842e">-->
    //                                                         <!-- 获取当前用户id ，跳转到文章详情页 -->
    //                                                         <a th:href="@{/read/{articleId}/{articleType}(articleId=${article.id},articleType=${article.articleType})}"
    //                                                            class="link"><i class="fa fa-link"></i></a>
    //                                             </div>
    //                                         @{/image/articleImages/{imageName}(imageName=${article.image})}
    //                                         <div class="news-content">
    //                                                 <h4>
    //                                                         <a>
    //                                                                 [[${article.title}]]
    //                                                             </a>
    //                                                     </h4>
    //                                                 <div class="date">
    //                                                         [[${#dates.year(article.createDate)} + '年' + ${#dates.month(article.createDate)} +
    //                                                         '月' + ${#dates.day(article.createDate)} + '日']]
    //                                                     </div>
    //                                                 <p>
    //                                                         [[${article.summary}]]
    //                                                     </p>
    //                                                 <!-- 获取当前用户id ，跳转到文章详情页 -->
    //                                                 <a th:href="@{/read/{articleId}/{articleType}(articleId=${article.id},articleType=${article.articleType})}"
    //                                                    class="btn">
    //                                                     阅读更多
    //                                                 </a>
    //                                         </div>
    //                         </div>
    //                     </div>
</script>

</body>
</html>